<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Iframe-Editor</title>
<head>
    <script type="text/javascript">
		var editorDoc;
        function InitEditable () {
			var editor = document.getElementById ("editor");

			if (editor.contentDocument)
				editorDoc = editor.contentDocument;
			else
				editorDoc = editor.contentWindow.document;
			
			var editorBody = editorDoc.body;

				// turn off spellcheck
			if ('spellcheck' in editorBody) {	// Firefox
				editorBody.spellcheck = false;
			}

			if ('contentEditable' in editorBody) {
					// allow contentEditable
				editorBody.contentEditable = true;
			}
			else {	// Firefox earlier than version 3
				if ('designMode' in editorDoc) {
						// turn on designMode
					editorDoc.designMode = "on";				
				}
			}
        }

        function ToggleBold () {
			editorDoc.execCommand ('bold', false, null);
        }
    </script>
</head>
<body onload="InitEditable ();">
<!--	<iframe id="editor" src="http://help.dottoro.com/external/examples/common/htm/editable.htm"></iframe> -->
        <iframe id="editor" src="html-js-css/editable.htm"></iframe>
	<br /><br />
	You can toggle the bold/normal state of the selected text with this button:
	<br />
	<button onclick="ToggleBold ();">Bold</button>
</body>
</html>